<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>无标题文档</title>
		<style>
			* {
				padding: 0 margin:0
			}
			html,body {
				height: 100%;
			}
			body {
				padding-top: 50px;
			}
			#div div {
				display: none;
				width: 300px;
				height: 300px;
				background: yellow;
			}
		</style>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">-->
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
		<script type="text/javascript">
		</script>
	</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="col-xs-2">
					<div id="menu01" class="list-group">
						<a href="#" class="list-group-item active">
							所有商品
						</a>
						<a href="#" class="list-group-item">一级菜单A</a>
						<a href="#" class="list-group-item">一级菜单B</a>
						<a href="#" class="list-group-item">一级菜单C</a>
						<a href="#" class="list-group-item">一级菜单D</a>
					</div><div id="menu02" class="hide" style="position: absolute; left: 185px; top: 0; width: 100px; height: 300px;" >
						<div class="list-group" role="menu02-A">
							<a href="#" class="list-group-item">二级菜单A-1</a>
							<a href="#" class="list-group-item">二级菜单A-2</a>
							<a href="#" class="list-group-item">二级菜单A-3</a>
							<a href="#" class="list-group-item">二级菜单A-4</a>
							<a href="#" class="list-group-item">二级菜单A-5</a>
							<a href="#" class="list-group-item">二级菜单A-6</a>
							<a href="#" class="list-group-item">二级菜单A-7</a>
						</div>
						<div class="list-group" role="menu02-B">
							<a href="#" class="list-group-item">二级菜单B-1</a>
							<a href="#" class="list-group-item">二级菜单B-2</a>
							<a href="#" class="list-group-item">二级菜单B-3</a>
							<a href="#" class="list-group-item">二级菜单B-4</a>
							<a href="#" class="list-group-item">二级菜单B-5</a>
							<a href="#" class="list-group-item">二级菜单B-6</a>
							<a href="#" class="list-group-item">二级菜单B-7</a>
						</div>
						<div class="list-group" role="menu02-C">
							<a href="#" class="list-group-item">二级菜单C-1</a>
							<a href="#" class="list-group-item">二级菜单C-2</a>
							<a href="#" class="list-group-item">二级菜单C-3</a>
							<a href="#" class="list-group-item">二级菜单C-4</a>
							<a href="#" class="list-group-item">二级菜单C-5</a>
							<a href="#" class="list-group-item">二级菜单C-6</a>
							<a href="#" class="list-group-item">二级菜单C-7</a>
						</div>
						<div class="list-group" role="menu02-D">
							<a href="#" class="list-group-item">二级菜单D-1</a>
							<a href="#" class="list-group-item">二级菜单D-2</a>
							<a href="#" class="list-group-item">二级菜单D-3</a>
							<a href="#" class="list-group-item">二级菜单D-4</a>
							<a href="#" class="list-group-item">二级菜单D-5</a>
							<a href="#" class="list-group-item">二级菜单D-6</a>
							<a href="#" class="list-group-item">二级菜单D-7</a>
						</div>
					</div></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var menu01_list = document.getElementById("menu01").children;
		var menu02 = document.getElementById("menu02");
		for(var i=1; i<menu01_list.length; i++){
			menu01_list[i].onmouseenter = function(){
				menu02.className = "show";
			}
		}
	</script>
</html>